<template>
    <view class="enter">
        <view class="en-wrap">
            <view class="enter-item">
                <!-- <view class="close" v-show="index !== 0" @tap="closeItem(index)"><text></text></view> -->
                <view class="form-des-ud">
                    <text class="des">设备</text>
                    <view class="bg" style="height:50rpx;">
                        <picker @change="bindPickerChange" :value="array[index]" range-key="name" :range="array">
                            <view class="val" style="corlor:#808080;">{{array[index].name}}</view>
                        </picker>
                        <uni-icon type="arrowdown" size="20" class="uicon2"></uni-icon>
                    </view>
                </view>
                <view class="form-des-ud">
                    <text class="des">车号</text>
                    <view class="bg"><input type="number" :value="array[0].carnum" placeholder="请输入车号" @input="carnum" /></view>
                </view>
                <!-- <view v-for="(item,index) in custom2Set_1" :key="index">
                    <view @tap="changeShow('QS_Picekr_custom2_1')" class="pickers">123</view>
                    <QSpicker type="custom2" ref="QS_Picekr_custom2_1" pickerId="custom2_1" :dataSet="custom2Set_1" showReset @hideQSPicker="hideQSPicker($event)" @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
                </view> -->
                <view v-for="(item,idx) in array2" :key="idx">
                    <view class="form-des-ud">
                        <text class="des">品名</text>
                        <view class="bg" style="height:50rpx;">
                            <picker @change="bindPickerChange2" :data-idx="idx" :range="goodsAll" range-key="goods_name">
                                <view class="val" v-text="array2[idx].goods_name" style="corlor:#808080;"></view>
                            </picker>
                            <uni-icon type="arrowdown" size="22" class="uicon2"></uni-icon>
                        </view>
                    </view>
                    <view class="form-des-ud">
                        <text class="des">数量</text>
                        <view class="bg"><input type="number" :data-idx="idx" :value="array2[idx].number" placeholder="请输入数量" @input="number1" /></view>
                        <view class="addIcon">
                            <img src="../../../static/images/icon/添加.png" @tap="bindAdd"></img>
                        </view>
                        <view class="addIcon2" v-show="idx != 0">
                            <img src="../../../static/images/icon/parcel_transporticon_icon_delete.png" @tap="deleteAdd(idx)"></img>
                        </view>
                    </view>
                </view>
            </view>
            <!-- <button type="default" class="bor" @tap="addQuantity">
                <text>+</text>
                添加
            </button> -->
        </view>
        <button class="fixBtn" @tap="addMsg">登记</button>
    </view>
</template>

<script>
import {
    uniIcon
} from "@dcloudio/uni-ui";
import {
    request
} from "../../../comon/js/request.js";

export default {
    data() {
        return {
            custom2Set_1: {
                itemArray: [
                    [{
                        title: "a", //name变量名需与下方steps.steps_1_value相同
                        value: "a" //可添加多项自定义想要的数据
                    }],
                ],
                steps: {
                    step_1_value: "title", //第一级显示的属性名
                },
                defaultValue: [0, 0] //初始数据
            },
            goodsAll: [0],
            array: [{
                id: 0,
                name: "哈喽",
                carnum: 20020
            }],
            index: 0,
            array2: [{
                goods_name: '',
                goods_id: "",
                number: "",
            }],

            index2: [],
            addIndex2: []
            // formItem: [{
            //     goods_id: "",
            //     number: ""
            // }]
        };
    },

    methods: {
        //删除添加
        deleteAdd(index) {
            // console.log(index, "..............................")
            this.array2.splice(index, 1)
        },
        changeShow(name) {
            this.$refs[name].show();
        },
        showQSPicker(res) {
            console.log(`pickerId为${res.pickerId},  类型为${res.type}的QS-picker显示了`);
        },
        hideQSPicker(res) {
            console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker隐藏了了`);
        },
        confirm(res) {
            // console.log('获取了用户选择----->' + JSON.stringify(res));
            console.log('获取了用户选择----->', res);
        },
        //添加批量
        bindAdd() {
            console.log(this.array2)
            console.log(this.goodsAll)
            this.array2.push({
                goods_id: "",
                number: "",
                goods_name: ""
            })

        },
        //输入车号
        carnum(e) {
            this.array[this.index].carnum = e.target.value;
            console.log(this.array[this.index].carnum);
        },
        //输入数量
        number1(e) {
            console.log(e.target.value, "idx", e)
            let idx = e.target.dataset.idx
            this.array2[idx].number = e.target.value;
            // console.log(this.array2[0].number);
            // console.log(e.target.value);
        },

        bindPickerChange: function (e) {
            console.log("picker发送选择改变，携带值为", e.target.value);
            this.index = e.target.value;
        },
        bindPickerChange2: function (e) {
            let index = e.target.dataset.idx
            console.log("picker发送选择改变，携带值为", this.array2[e.detail.value].goods_id);
            this.$set(this.array2[index], "goods_name", this.goodsAll[e.target.value].goods_name)
            this.$set(this.array2[index], "goods_id", this.goodsAll[e.target.value].id)
            console.log(this.index2);
        },
        bindPickerChangeName: function (e) {
            console.log(parseInt(e.target.id));
        },
        closeItem(index) {
            this.device.splice(index, 1);
        },
        //添加信息
        addMsg() {
            let than = this;
            let formItem = []
            console.log(this.array2);
            this.array2.forEach(item => {
                // console.log(item);
                formItem.push({
                    goods_id: item.goods_id,
                    number: item.number,
                })
            })
            console.log(formItem);
            request({
                url: "v1/stock/add",
                method: "POST",
                data: {
                    equipment_id: than.array[than.index].id,
                    car_num: than.array[than.index].carnum,
                    item: formItem
                }
            }).then(res => {
                console.log(res);
                if (res.statusCode === 200) {
                    uni.showModal({
                        content: "添加成功",
                        showCancel: false,
                        success() {
                            uni.switchTab({
                                url: "../stock"
                            })
                            // than.$set(than.array, 0, {
                            //     id: 0,
                            //     name: than.array[0].name,
                            //     carnum: ''
                            // });
                            // than.$set(than.array2, 0, {
                            //     goods_name: than.array2[than.index].goods_name,
                            //     number: ""
                            // });
                            console.log("清除成功");
                        },
                        fail: function (res) {}
                    });
                }
                if (res.statusCode === 422) {
                    uni.showToast({
                        title: '请填写正确数量',
                        duration: 2000,
                        icon: "none"
                    })
                }
            });
        },
        //添加结构
        addQuantity() {},
        //获取设备接口
        getMsg() {
            let than = this;
            request({
                url: "v1/equipment/all",
                method: "GET"
            }).then(res => {
                than.array = res.data.result;
                than.array[than.index].id = res.data.result[than.index].id;
            });
        },
        //获取品名接口
        getBrand() {
            let than = this;
            request({
                url: "v1/goods/all",
                method: "GET"
            }).then(res => {
                console.log(res.data.result);
                than.goodsAll = res.data.result;
                // console.log(res.data.result[than.index].id)
                than.array2[than.index].goods_id =
                    res.data.result[than.index].id;
            });
        }
    },

    components: {
        uniIcon,
    },
    onLoad() {
        this.getMsg();
        this.getBrand();
    }
};
</script>

<style lang="scss">
page {
    background: $color-grey-bg;
}

.uicon2 {
    position: relative;
    top: -37rpx;
    left: 505rpx;
}

.addIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 30rpx;

}

.addIcon2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -372rpx;
    left: 304rpx;

}

.addIcon img {
    width: 50rpx;
    height: 50rpx;
}

.addIcon2 img {
    width: 40rpx;
    height: 40rpx;
}

.en-wrap {
    padding: $spacing-center + 10 $spacing-center;
    padding-bottom: 130rpx;

    .bor {
        margin-top: $spacing-center;
        font-size: $fs-base;
        border-radius: 60rpx;
        border: none;
        background: #fff;
        color: #666;

        text {
            padding: 0 20rpx;
        }

        &::after {
            border: none;
        }
    }
}

.enter-item {
    background: #fff;
    padding: $spacing-center;
    margin-bottom: $spacing-center + 10;
    position: relative;

    .close {
        width: 35rpx;
        height: 35rpx;
        background: red;
        position: absolute;
        right: -15rpx;
        top: -15rpx;
        border-radius: 35rpx;
        font-size: 0;

        text {
            display: block;
            height: 3rpx;
            width: 50%;
            background: #fff;
            margin: 16rpx auto;
            font-size: 0;
        }
    }
}
</style>
